<!DOTYPE html>
<html>
    <head>
    	<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
		<title></title>
	</head>
	<body>
		<canvas height="620" width="1270" id="canvas2d"></canvas>
		<script type="text/javascript">
		window.onload = function (){
			var canvas = document.getElementById('canvas2d');
			var particles = [];
			var tick = 0;
            //创建粒子
			function createParticles(){
				if(tick%10 ==0){
					if(particles.length < 100){
						particles.push({
							x: Math.random()*canvas.width,
							y: 0,
							speed: 2+Math.random()*3,
							radius: 5+Math.random()*5,
							color: "white",
						});
					}
				}
			}
            //刷新粒子
			function updateParticles(){
				for(var i in particles){
					var part = particles[i];
					part.y += part.speed;
				}
			}
            //消除超过浏览器边界的粒子
			function killParticles(){
				for(var i in particles){
					var part = particles[i];
					if(part.y > canvas.height){
						part.y = 0;
					}
				}
			}
            //绘制粒子
			function drawParticles(){
				var ctx = canvas.getContext('2d');
				ctx.fillStyle = "black";
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				for(var i in particles){
					var part = particles[i];
					ctx.beginPath();
					ctx.arc(part.x, part.y, part.radius, 0, Math.PI*2);
					ctx.closePath();
					ctx.fillStyle = part.color;
					ctx.fill();
				}
			}
			function loop(){
				window.requestAnimationFrame(loop);
				createParticles();
				updateParticles();
				killParticles();
				drawParticles();
			}
			window.requestAnimationFrame(loop);
		};
		</script>
	</body>
</html>